<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <h3 class="form-setting-panel-title">{{field.displayName}}</h3>   
    <!-- end 标题 -->
    <p class="form-design-warning">{{ $t('common.form.tip.systemTemplateTips') }}</p>
    <h3>{{ $t('common.base.concatOption') }}</h3>
    <div class="form-setting-group form-setting-group__identity">
      <el-checkbox-group class="checkbox-list" v-model="checkedFeildName" @change="handleChange">
        <el-checkbox 
          v-for="(item) in settingFields" 
          :key="item.fieldName" 
          :label="item.fieldName"
          :disabled="disableFieldNames.includes(item.fieldName)"
          >
          {{item.displayName}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
/* mixin */
import SettingMixin from '@src/component/form/mixin/setting';
/* props */
import { settingProps } from '@src/component/form/components/props';
import { formFields } from './constant/fields'

export default {
  name: 'form-identity-setting',
  mixins: [SettingMixin],
  props: settingProps,
  data() {
    return {
      initFields: formFields()
    }
  }, 
  computed: {
    disableFieldNames() {
      return this.settingFields.slice(0, 2).map(field=> field.fieldName)
    },
    settingFields() {
      let resultFields = []
      const selectFields = this.field.setting?.settingFields 
      if(selectFields) {
        resultFields = selectFields
      } else {
        resultFields = this.initFields
        this.update(resultFields, 'settingFields', true)
      }
      return resultFields
    },
    checkedFeildName: {
      get() {
        return this.field.setting.selectFields || [...this.disableFieldNames]
      },
      set (value) {
        this.update(value, 'selectFields', true)
      }
    }
  }, 
  methods: {
    update(value, prop, isSetting = false) {
      this.$emit('input', {value, prop, isSetting});
    },
    handleChange(value) {
      const resultValues = this.settingFields.map(field => {
        value.includes(field.fieldName) ? field.setting.show = true : field.setting.show = false
        return field
      })
    
      this.update(resultValues, 'settingFields', true)
    }
  }
}
</script>
<style lang="scss" scoped>
.form-setting-group__identity {
    display: flex;
    flex-direction: column;
  .checkbox-list{
    display: flex;
    flex-direction: column;
  }
}
</style>
